<template>
	<view class="common-content">
		<u-navbar title-color="#fff" back-icon-color="#333333" :is-fixed="true" :is-back="false" height="88">
			<view class="common-tabs-box">
				<view class="slot-wrap">
					<view class="slot-wrap-left" @tap="back">
						<u-icon name="arrow-left"></u-icon>
					</view>
					<view class="slot-wrap-title">我的问诊</view>
				</view>
				<u-tabs-swiper activeColor="#F4333C" ref="tabs" :list="list" :current="current" @change="change"
					:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
		</u-navbar>
		<view class="common-content-box container">
			<view class="register-card" v-for="(item,index) in dataList" :key="index" @click="toDetail(item)">
				<view class="register-card-top">
					<view class="left-right">
						<view class="left">
							{{ item.createTime || '--'}}
						</view>
						<view :class="{'isSuccess' : item.status == 0,'ongoing': item.status == 1}">
							<!-- {{ item.status == 0 ? '待接诊' : item.status == 1 ? '进行中' : '已结束' }} -->
							{{ item.status == 0 ? '待接诊' : item.status == 1 ? '进行中' : '' }}
						</view>
					</view>
					<view class="left-right">
						<view class="left">
							<u-avatar :src="item.member ? item.member.face ? item.member.face : src1 : src1"
								mode="circle" size='120'></u-avatar>
						</view>
						<view class="right-desc">
							<view class="right-desc-title">
								{{item.userVisitCard ? item.userVisitCard.username : '--'}}
							</view>
							<view class="">
								{{item.userVisitCard ? (item.userVisitCard.sex == 1  ? '男' : '女') :''}}
								{{' ' + filterAge(item.userVisitCard) + '岁' }}
							</view>
							<view class="right-desc-text">
								{{item.description || '--'}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer-more">
			<view class="view-more" v-if="dataList.length > 0">
				{{ isMore ? "上滑查看更多" : "没有更多了" }}
			</view>
			<view class="view-more" v-if="dataList.length == 0">
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
	import { API } from "@/config/myApi.js";
	// import { filterAge } from "@/utils/filters.js";
	export default {
		data() {
			return {
				// tabs数据
				list: [{
					name: '全部',
				}, {
					name: '待接诊',
				}, {
					name: '进行中',
				}, {
					name: '已结束',
				}],
				current: 0,
				dataList: [],
				params: {
					// expertId:this.$store.state.expertId,
					page: 1,
					rows: this.$store.state.rows,
				},
				rows: this.$store.state.rows,
				isMore: false,
				// 头像
				src1: '@/static/img/common/man.png',
				src2: '@/static/img/common/woman.png',
			};
		},
		onLoad(options) {
			if (options.current) {
				this.current = options.current;
				let pram = {
					...this.params,
					status: --options.current,
				}
				console.log('参数', pram);
				this.getConsultByExpertId(pram)
			} else {
				this.getConsultByExpertId(this.params)
			}
		},
		onReachBottom() {
			if (this.isMore) {
				this.params.page++;
				this.addRandomData()
			}
		},
		methods: {
			back() {
				uni.switchTab({
					url: "/pages/tabbar/user/my"
				})
			},
			// 获取咨询列表
			getConsultByExpertId(pram) {
				API.consultByExpertId(pram).then(res => {
					if (res.code == 200) {
						let result = res.result.list;
						this.dataList = result;
						if (result.length >= this.rows) {
							this.isMore = true;
						} else {
							this.isMore = false;
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			// tabs切换
			change(index) {
				if (this.current != index) {
					this.current = index;
					this.params.page = 1;
					// this.isMore = true;
					if (index != 0) {
						let pram = {
							...this.params,
							status: --index,
						};
						console.log('参数', pram);
						this.getConsultByExpertId(pram);
					} else {
						this.getConsultByExpertId(this.params);
					}
				}
			},
			toDetail(item) {
				uni.setStorageSync("patientInfo", item);
				uni.navigateTo({
					url: "/pages/mine/myConsultation/inquiriesDetails?user_id=" + item.userId
				})
			},
			// 加载更多
			addRandomData() {
				API.consultByExpertId(this.params).then(res => {
					if (res.code == 200) {
						let result = res.result.list;
						if (result.length != 0) {
							this.dataList = this.dataList.concat(result);
						}
						if (result.length >= this.rows) {
							this.isMore = true;
						} else {
							this.isMore = false;
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
					console.log('结果', this.dataList);
				})
			},
			filterAge(user) {
				if (user&&user.birthday) {
					let date = new Date;
					let year = date.getFullYear();
					let birth = user.birthday.slice(0, 4)
					return year - birth
				}
				return '--'
			}
		}
	}
</script>

<style lang="scss" scoped>

	// 公共样式
	.left-right {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #999;

		.left {
			margin-right: 30rpx;
		}

		.right-desc {
			width: calc(100% - 30rpx - 120rpx);
			color: #333333;

			&-title {
				font-weight: 700;
			}

			&-text {
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}

	// 主体
	// 单个区域-公共样式
	.page-box-card-bottom {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: 118rpx;
		padding: 30rpx 0;

	}

	// 挂号区域
	.register-card {
		margin-top: 24rpx;
		padding: 28rpx 24rpx 0;
		width: 690rpx;
		// height: 373rpx;
		background: #FFFFFF;
		border-radius: 14rpx;

		&-top {
			// height: 224rpx;
			border-bottom: 1rpx solid transparent;

			>view {
				margin-bottom: 28rpx;
			}

			.isSuccess {
				color: #F4333C;
			}

			.ongoing {
				color: #F47333;
			}
		}

	}
</style>
